<template>
  <div class="amusement">
    <div class="tab">
    <van-tabs :active="active" @change="onChange" type="card">
      <van-tab title="全部"></van-tab>
      <van-tab v-for="(item, index) in classList" :key="index" :title="item.title"></van-tab>
    </van-tabs>
    </div>
    <div class="amusement-content">
      <amusement :info="item" v-for="(item, index) in list" :key="index"></amusement>
    </div>
    <bottoms></bottoms>
  </div>
</template>

<script>
  import amusement from '@/components/home/amusement'
  import bottoms from '@/components/reachBottom/index'
  export default {
    name: "index",
    components: {
      amusement,
      bottoms
    },
    data() {
      return {
        active: 0,
        list: [],
        dataIndex: {},
        totalPage: 1,
        currentPage: 1,
        classList:[],
        loadingEnd:{
          moduleOne: false,
        },
      }
    },
    methods: {
      onChange(e) {
        this.active = e.target.index
        this.viewLoad();
      },
      getInfo() {
        this.$ajax
          .get(this.$api.getInfoClass, {page_size: 10, page: 1})
          .then(res => {
            this.classList = res.data
            if (this.type !== "0") {
              for (let i = 0; i < this.classList.length; i++) {
                this.dataIndex[i + 1] = this.classList[i].id
                if (this.type === this.classList[i].id) {
                  this.active = i + 1;
                }
              }
            } else {
              this.active = parseInt(this.type)
            }
            this.getList()
          })
          .catch(err => {
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getList() {
        let info = {
          page_size: 10,
          page: this.currentPage
        }
        if (this.active !== 0) {
          info.mid = this.dataIndex[this.active]
        }
        this.$ajax
          .get(this.$api.getInfoList, info)
          .then(res => {
            this.list.push(...res.data);
            this.loadingEnd.moduleOne = true
            this.totalPage = res.total_page
            if(res.total_count === 0){
              this.$store.dispatch("changeIsEmpty", true);
            } else {
              this.$store.dispatch("changeIsEmpty", false);
            }
          })
          .catch(err => {
            this.loadingEnd.moduleOne = true
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      viewLoad(isOnload){
        this.list =[];
        this.currentPage=1;
        this.loadingEnd.moduleOne = false
        this.$store.dispatch("changeIsMore", false);
        this.$store.dispatch("changeIsEnd", false);
        this.$store.dispatch("changeIsEmpty", false);
        ﻿uni.showLoading({
          title: '加载中',
          mask: true
        });
        if(isOnload){
          this.getInfo()
        } else {
          this.getList()
        }
      }
    },
    onPullDownRefresh(){
      this.viewLoad()
      ﻿uni.stopPullDownRefresh() //停止下拉刷新
    },
    onReachBottom(){
      if(this.totalPage > this.currentPage){
        this.$store.dispatch("changeIsMore", true);
        this.$store.dispatch("changeIsEnd", false);
        this.currentPage++
        this.getList();
      } else {
        this.$store.dispatch("changeIsEnd", true);
        this.$store.dispatch("changeIsMore", false);
      }
    },
    computed:{
      hideLoading(){
        if(this.loadingEnd.moduleOne){
          setTimeout(function(){
            ﻿uni.hideLoading()
            }, 800)
        }
      }
    },
    ﻿onShareAppMessage(res){
  ﻿this.$common.share()
  },
    onLoad(){
      ﻿uni.showShareMenu({
        withShareTicket: true
      })
      this.viewLoad(true)
    }
  }
</script>

<style scoped>
  .tab{
  position: fixed;
  top: 0;
  width: 100%
}
.amusement-content{
  padding: 104rpx 30rpx 0 30rpx;
}
</style>
